<template>
  <div class="main">
    <govheader   @zfNameflagChange="zfNameflagChange"  title="化工产业大脑 · 环境保护"></govheader >
    <govnavigation></govnavigation>
    <el-row
      class="content"
      :gutter="10"
      style="padding-left: 15px; padding-right: 5px"
      v-if="zfNameflag"
    >
      <el-col :span="8" class="content-left" style="width: 34.046%; margin-top: 3px">
        <el-col class="box">
          <div class="title">
            <p>重点企业环境信用评价</p>
          </div>
          <div class="content-body">
            <div
              style="
                width: 50%;
                height: 174px;
                background: transparent;
                border-radius: 10px;
                position: relative;
              "
            >
              <div v-show="echarts2ShowFlag" id="annular2" style="width: 100%; height: 174px;z-index:100"></div>
              <div
                v-show="!echarts2ShowFlag"
                style="
                  width: 100%;
                  height: 174px;
                  color: #909399;
                  font-size: 14px;
                  text-align: center;
                  line-height: 170px;
                "
              >暂无数据</div>
              </div>
            <div
              style="   width: 50%;
                height: 174px;
                background: transparent;
                border-radius: 10px;
                position: relative;"
            >
              <div class="enterprise-body">
                <div class="enterprise-content" v-for="(item,index) in option2Data" :key="index">
                  <div class="enterprise-color" :style="{background: item.itemStyle.color}"></div>
                  <div class="enterprise-type">{{item.name}}</div>
                  <div class="enterprise-count">{{item.pre}}</div>
                </div>
              </div>
            </div>
          </div>
        </el-col>
        <el-col class="box box2" style="margin-bottom: 3px; margin-top: 3px">
          <div class="title">
            <p>废气排放监测</p>
          </div>
          <div class="content-body">
            <div style="width: 50%; padding-left: 10px">
              <div class="craft-body" style="float: left">
                <div class="craft-title">
                  <span class="title-content">监测点数量</span>
                </div>
                <div class="craft-value">{{ monitoringNum }}</div>
              </div>
              <div class="craft-body" style="margin-left: 10px">
                <div class="craft-title">
                  <span class="title-content">监测气体类型</span>
                </div>
                <div class="craft-value">{{ monitoringGasType }}</div>
              </div>
              <div class="craft-body" style="margin-top: 10px">
                <div class="craft-title">
                  <span class="title-content">超标点位数</span>
                </div>
                <div class="craft-value">{{ overStandardNum }}</div>
              </div>
              <div class="craft-body" style="margin-top: 10px; margin-left: 10px">
                <div class="craft-title">
                  <span class="title-content">超标最多物质</span>
                </div>
                <div class="craft-value">{{ exceedingMaterial }}</div>
              </div>
            </div>
            <div id="annular3" style="float: right; width: 50%; height: 140px"></div>
            <div style="width: 100%; margin-top: 20px">
              <div class="tabs">
                <div
                  :class="activeTab1 === 'so2' ? 'selectActive' : ''"
                  @click="activeClick1('so2')"
                >SO2</div>
                <div
                  :class="activeTab1 === 'nox' ? 'selectActive' : ''"
                  @click="activeClick1('nox')"
                  style="border-left: 1px solid #7db2d0"
                >NOX</div>
                <div
                  :class="activeTab1 === 'pm' ? 'selectActive' : ''"
                  @click="activeClick1('pm')"
                  style="border-left: 1px solid #7db2d0"
                >PM</div>
              </div>
              <el-table
                ref="table1"
                :data="tableData1"
                style="width: 100%; margin-top: 10px"
                height="288px"
                :cell-style="{ padding: '6px 0px' }"
                :header-cell-style="{
                  backgroundColor: '#CADFFF',
                  color: '#4A6899',
                  padding: '6px 0px',
                }"
                :cell-class-name="tableRowClassName"
              >
                <el-table-column type="index" label="排名" width="60" align="center"></el-table-column>
                <el-table-column
                  property="entName"
                  align="center"
                  :show-overflow-tooltip="true"
                  label="企业名称"
                ></el-table-column>
                <el-table-column property="monitoringName" align="center" label="监测点名称">
                    <!-- <template scope="scope">
                    <span
                      style="
                        font-weight: 600;
                        background: -webkit-linear-gradient(90deg,#ffca12,#ffffff);
                        -webkit-background-clip: text;
                        -webkit-text-fill-color: transparent;
                      "
                      >{{ scope.row.monitoringName }}</span
                    >
                  </template> -->
                </el-table-column>
                <el-table-column property="detectionValue" align="center" :label="'检测值'+ppm2"></el-table-column>
              </el-table>
            </div>
          </div>
        </el-col>
      </el-col>
      <el-col
        :span="7"
        class="content-center"
        style="background-color: (255, 255, 255, 0.5); width: 31.9%"
      >
        <div style="position: relative">
          <div id="annular1" style="width: 100%; height: 491px"></div>
          <div class="legend-body">
            <div class="legend-content" @click="changeMap('废气监测点')">
              <div class="legend-point" style="background: #65d77b"></div>
              <div class="legend-title" style="color: #00e4ff">废气监测点</div>
              <div class="legend-value" style="color: #65d77b">{{ gasSum }}</div>
            </div>
            <div class="legend-content" @click="changeMap('大气监测点')">
              <div class="legend-point" style="background: #009cec"></div>
              <div class="legend-title" style="color: #00e4ff">大气监测点</div>
              <div class="legend-value" style="color: #009cec">{{ airSum }}</div>
            </div>
            <div class="legend-content" @click="changeMap('污水监测点')">
              <div class="legend-point" style="background: #f59a23"></div>
              <div class="legend-title" style="color: #00e4ff">污水监测点</div>
              <div class="legend-value" style="color: #f59a23">{{ waterSum }}</div>
            </div>
          </div>
        </div>
        <div class="box" style="margin-bottom: 3px; margin-top: 6px">
          <div class="title">
            <p>废物处理</p>
          </div>
          <div
            style="
              margin-top: 10px;
              margin-bottom: 0px;
              width: 49%;
              margin-right: 2%;
              float: left;
            "
          >
            <div class="content-body">
              <div style="width: 100%; float: left; position: relative">
                <div v-show="echarts5ShowFlag" id="annular5" style="width: 100%; height: 209px;z-index:100"></div>
                <div
                  v-show="!echarts5ShowFlag"
                  style="
                    width: 100%;
                    height: 209px;
                    color: #909399;
                    font-size: 14px;
                    text-align: center;
                    line-height: 200px;
                  "
                >暂无数据</div>
                <!-- <div class="legend">
                  <div class="legendColor" :style="{ 'background-color': legendColor5 }"></div>
                  <div>{{ legendValue5 }}</div>
                </div>
                <div class="aperture"></div> -->
              </div>
            </div>
          </div>
          <div
            style="
              margin-top: 10px;
              margin-bottom: 0px;
              width: 49%;
              float: left;
            "
          >
            <div class="content-body">
              <div style="width: 100%; float: left; position: relative">
                <div v-show="echarts4ShowFlag" id="annular4" style="width: 100%; height: 209px;z-index:100"></div>
                <div
                  v-show="!echarts4ShowFlag"
                  style="
                  width: 100%;
                  height: 209px;
                  color: #909399;
                  font-size: 14px;
                  text-align: center;
                  line-height: 200px;
                "
                >暂无数据</div>
                <!-- <div class="legend">
                  <div class="legendColor" :style="{'background-color':legendColor4}"></div>
                  <div>{{legendValue4}}</div>
                </div>
                <div class="aperture"></div> -->
              </div>
            </div>
          </div>
        </div>
      </el-col>
      <el-col :span="8" class="content-right" style="width: 34.046%">
        <el-row :gutter="15">
          <el-col :span="24">
            <div class="box" style="position: relative; margin-top: 3px">
              <div class="title">
                <p>地区环境空气质量</p>
              </div>
              <div class="content-body">
                <div class="tabs">
                  <div
                    :class="activeTab2 === 'AQI' ? 'selectActive' : ''"
                    @click="activeClick2('AQI')"
                  >AQI</div>
                  <div
                    :class="activeTab2 === 'CO' ? 'selectActive' : ''"
                    @click="activeClick2('CO')"
                    style="border-left: 1px solid #7db2d0"
                  >CO</div>
                  <div
                    :class="activeTab2 === 'O3' ? 'selectActive' : ''"
                    @click="activeClick2('O3')"
                    style="border-left: 1px solid #7db2d0"
                  >O3</div>
                  <div
                    :class="activeTab2 === 'SO2' ? 'selectActive' : ''"
                    @click="activeClick2('SO2')"
                    style="border-left: 1px solid #7db2d0"
                  >SO2</div>
                  <div
                    :class="activeTab2 === 'NO2' ? 'selectActive' : ''"
                    @click="activeClick2('NO2')"
                    style="border-left: 1px solid #7db2d0"
                  >NO2</div>
                  <div
                    :class="activeTab2 === 'PM2.5' ? 'selectActive' : ''"
                    @click="activeClick2('PM2.5')"
                    style="border-left: 1px solid #7db2d0"
                  >PM2.5</div>
                  <div
                    :class="activeTab2 === 'PM10' ? 'selectActive' : ''"
                    @click="activeClick2('PM10')"
                    style="border-left: 1px solid #7db2d0"
                  >PM10</div>
                </div>
                <el-table
                  ref="table2"
                  :data="tableData2"
                  style="width: 100%"
                  height="149px"
                  :cell-style="{ padding: '6px 0px' }"
                  :header-cell-style="{
                    backgroundColor: '#CADFFF',
                    color: '#4A6899',
                    padding: '6px 0px',
                  }"
                  :cell-class-name="tableRowClassName"
                >
                  <el-table-column type="index" label="排名" width="60" align="center"></el-table-column>
                  <el-table-column
                    property="name"
                    align="center"
                    :show-overflow-tooltip="true"
                    label="地区名称"
                  ></el-table-column>
                  <el-table-column property="monitoringName" align="center" label="监测点名称">
                          <!-- <template scope="scope">
                    <span
                      style="
                        font-weight: 600;
                        background: -webkit-linear-gradient(90deg,#ffca12,#ffffff);
                        -webkit-background-clip: text;
                        -webkit-text-fill-color: transparent;
                      "
                      >{{ scope.row.monitoringName }}</span
                    >
                  </template> -->
                  </el-table-column>
                  <el-table-column property="detectionValue" align="center" :label="'检测值'+ppm1"></el-table-column>
                </el-table>
              </div>
            </div>
          </el-col>
        </el-row>
        <el-row :gutter="15">
          <el-col :span="24">
            <div class="box" style="margin-top: 1px">
              <div class="title" style="margin-top: 3px">
                <p>环保处罚单数</p>
              </div>
              <div class="content-body">
                <div v-show="echarts6ShowFlag" id="annular6" style="width: 100%; height: 190px"></div>
                <div
                  v-show="!echarts6ShowFlag"
                  style="
                    width: 100%;
                    height: 190px;
                    color: #909399;
                    font-size: 14px;
                    text-align: center;
                    line-height: 190px;
                  "
                >暂无数据</div>
              </div>
            </div>
          </el-col>
        </el-row>
        <el-row :gutter="15">
          <el-col :span="24">
            <div class="box" style="margin-bottom: 0px; margin-top: 5px">
              <div class="title">
                <p>污水排放总量</p>
              </div>
              <div class="content-body">
                <div v-show="echarts7ShowFlag" id="annular7" style="width: 100%; height: 220px"></div>
                <div
                  v-show="!echarts7ShowFlag"
                  style="
                    width: 100%;
                    height: 220px;
                    color: #909399;
                    font-size: 14px;
                    text-align: center;
                    line-height: 180px;
                  "
                >暂无数据</div>
              </div>
            </div>
          </el-col>
        </el-row>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import dd from 'gdt-jsapi'
import govheader from '@/components/govheader2'
import govnavigation from '@/components/govnavigation2'
import 'echarts-gl'
const echarts = require('echarts')
export default {
  components: { govheader, govnavigation },
  name: 'zfPerMuBenefit',
  data () {
    return {
      optionData2Total: 0,
      selectLegend: '废气监测点',
      activeTab1: 'so2',
      activeTab2: 'AQI',
      zfNameflag: true,
      colorList: [
        'rgb(5,148,239)',
        'rgb(5,119,234)',
        'rgb(101,206,153)',
        'rgb(243,242,134)',
        'rgb(255,203,91)',
        'rgb(183,74,237)'
      ],
      colorList11: [
        'rgba(5,148,239,.5)',
        'rgba(5,119,234,.5)',
        'rgba(101,206,153,.5)',
        'rgba(243,242,134,.5)',
        'rgba(255,203,91,.5)',
        'rgba(183,74,237,.5)'
      ],
      colorList1: [
        'rgb(109,104,255)',
        'rgb(0,239,254)',
        'rgb(68,215,182)',
        'rgb(255,166,0)',
        'rgb(152,123,255)',
        'rgb(118,190,204)'
      ],
      colorList2: [
        'rgb(4,32,245)',
        'rgb(0,96,255)',
        'rgb(109,212,0)',
        'rgb(254,219,101)',
        'rgb(163,10,235)',
        'rgb(0,135,146)'
      ],
      tableData1: [],
      tableData2: [],
      enterpriseCount: [],
      option1: {},
      option2: {},
      option3: {},
      option4: {},
      option5: {},
      option6: {},
      option7: {},
      myChart1: {},
      myChart2: {},
      myChart3: {},
      myChart4: {},
      myChart5: {},
      myChart6: {},
      myChart7: {},
      ppm1: 'AQI',
      ppm2: 'μg/m³',
      parkInfo: {
        parkName: '园区名称',
        entQty: '0',
        address: '',
        primeMoverIndustry: '',
        parkMainIncome: '0'
      },
      center: {
        杭州市: [119.539823, 29.870667],
        宁波市: [121.580925, 29.676002],
        温州市: [120.455764, 27.880064],
        嘉兴市: [120.802189, 30.652582],
        湖州市: [119.873415, 30.780146],
        绍兴市: [120.580041, 29.767623],
        金华市: [119.999656, 29.105538],
        衢州市: [118.705947, 28.875889],
        舟山市: [122.233931, 30.231275],
        台州市: [121.117506, 28.682316],
        丽水市: [119.579372, 28.183492]
      },
      option1Data: [],
      option1Scatter1Data: [],
      option1Scatter2Data: [],
      option1Scatter3Data: [],
      option2Data: [],
      option3Data: [],
      option4Data: [],
      option5Data: [],
      option6Data: [],
      optionlist: [],
      gasSum: 0,
      airSum: 0,
      waterSum: 0,
      monitoringNum: 0,
      monitoringGasType: 0,
      overStandardNum: 0,
      exceedingMaterial: '暂无数据',
      echarts2ShowFlag: true,
      echarts4ShowFlag: true,
      echarts5ShowFlag: true,
      echarts6ShowFlag: true,
      echarts7ShowFlag: true,
      table1Interval: null,
      table2Interval: null,
      echarts2Interval: null,
      echarts4Interval: null,
      legendColor3: '',
      legendValue3: '',
      legendColor4: '',
      legendValue4: '',
      legendColor5: '',
      legendValue5: '',
      legendColor7: '',
      legendValue7: '',
      legendColor2: '',
      legendValue2: '',
      legendColor1: '',
      legendValue1: '',
      legendColor: '',
      legendValue: '',
      timer4: null,
      timer2: null,
      timer5: null
    }
  },
  created () {
    if (window.SITE_CONFIG['sitURL'] === 'https://www.plantmate.com/api') {
      dd.getAuthCode({})
        .then((res) => {
          if (res) {
            let params = {
              applicationFlag: '20',
              authCode: res.auth_code
            }
            this.$http
              .post(`/home/sys/loginfree/authentication`, params)
              .then(({ data: res }) => {
                console.log('res2:', res)
                localStorage.setItem('buriedPointInformation',JSON.stringify(res.data))
                this.$store.commit('zfName', res.data.lastName)
                if (res.code !== 0) {
                  this.zfNameflag = false
                }
              })
              .catch(() => {
                this.zfNameflag = false
              })
          }
        })
        .catch(() => {
          this.zfNameflag = false
        })
    }
  },
  // 调用
  mounted () {
    this.getData()
  },
  beforeDestroy () {
    clearInterval(this.table1Interval)
    clearInterval(this.table2Interval)
    clearInterval(this.echarts2Interval)
    clearInterval(this.echarts4Interval)
    clearInterval(this.timer4)
    clearInterval(this.timer5)
    clearInterval(this.timer2)
  },
  methods: {
    zfNameflagChange (val) {
      this.zfNameflag = val
    },

    changeMap (legend) {
      if (legend !== this.selectLegend) {
        this.selectLegend = legend
        this.option1.series[1].name = legend
        if (legend === '废气监测点') {
          this.option1.series[1].itemStyle.color = '#65D77B'
          this.option1.series[1].data = this.option1Scatter1Data
        } else if (legend === '大气监测点') {
          this.option1.series[1].itemStyle.color = '#009CEC'
          this.option1.series[1].data = this.option1Scatter2Data
        } else if (legend === '污水监测点') {
          this.option1.series[1].itemStyle.color = '#F59A23'
          this.option1.series[1].data = this.option1Scatter3Data
        }
        this.myChart1.setOption(this.option1)
      }
    },
    getData () {
      this.$http
        .post(`/home/government/govEnvProtect/envProtect`, {
          gasType: this.activeTab1,
          airType: this.activeTab2
        })
        .then(({ data: res }) => {
          if (res && res.code === 0) {
            this.monitoringNum = res.data.envProtect.monitoringNum
            this.overStandardNum = res.data.envProtect.overStandardNum

            this.tableData1 = res.data.envProtect.gasRankList
            this.tableData2 = res.data.envProtect.airQualityRankList

            let govEnvAirMonitoringVoList = {}
            let govEnvWasteGasMonitoringVoList = {}
            let govEnvWasteWaterMonitoringVoList = {}
            res.data.envProtect.govEnvWasteGasMonitoringVoList.forEach(
              (item) => {
                govEnvAirMonitoringVoList[item.name] = item.num
              }
            )
            res.data.envProtect.govEnvAirMonitoringVoList.forEach((item) => {
              govEnvWasteGasMonitoringVoList[item.name] = item.num
            })
            res.data.envProtect.govEnvWasteWaterMonitoringVoList.forEach(
              (item) => {
                govEnvWasteWaterMonitoringVoList[item.name] = item.num
              }
            )
            for (let i in govEnvAirMonitoringVoList) {
              this.gasSum += govEnvWasteGasMonitoringVoList[i]
              this.airSum += govEnvAirMonitoringVoList[i]
              this.waterSum += govEnvWasteWaterMonitoringVoList[i]
              this.option1Data.push({
                name: i,
                gasCount: govEnvWasteGasMonitoringVoList[i],
                airCount: govEnvAirMonitoringVoList[i],
                waterCount: govEnvWasteWaterMonitoringVoList[i]
              })
            }
            this.option1Scatter1Data = this.option1Data.map((item) => {
              return this.center[item.name].concat(item.gasCount)
            })

            this.option1Scatter2Data = this.option1Data.map((item) => {
              return this.center[item.name].concat(item.airCount)
            })
            this.option1Scatter3Data = this.option1Data.map((item) => {
              return this.center[item.name].concat(item.waterCount)
            })

            this.option2Data = res.data.envProtect.govEnvEntLevelVoList

            var list = []
            var num = -1
            this.option2Data = this.option2Data.map((i, index) => {
              num++
              if (num === this.colorList1.length) {
                num = 0
              }
              i.itemStyle = {
                color: this.colorList[num],
                color1: this.colorList11[num]
              }
              this.optionData2Total += Number(i.value)
              list.push(i.value)

              return i
            })
            this.option2Data = this.option2Data.map((i, index) => {
              i.pre = this.countPercentage(list)[index]
              return i
            })
            this.option3Data = res.data.envProtect.normalPer

            this.option4Data = [
              {
                name: '产生量',
                value: res.data.envProtect.dangerWaste.production,
                itemStyle: {
                  color: this.colorList1[0],
                  color1: this.colorList2[0]
                }
              },
              {
                name: '贮存量',
                value: res.data.envProtect.dangerWaste.storageCapacity,
                itemStyle: {
                  color: this.colorList1[1],
                  color1: this.colorList2[1]
                }
              },
              {
                name: '运输量',
                value: res.data.envProtect.dangerWaste.transferAmount,
                itemStyle: {
                  color: this.colorList1[2],
                  color1: this.colorList2[2]
                }
              },
              {
                name: '处理量',
                value: res.data.envProtect.dangerWaste.disposalVolume,
                itemStyle: {
                  color: this.colorList1[3],
                  color1: this.colorList2[3]
                }
              }
            ]

            this.option5Data = [
              {
                name: '产生量',
                value: res.data.envProtect.solidWaste.production,
                itemStyle: {
                  color: this.colorList1[0],
                  color1: this.colorList2[0]
                }
              },
              {
                name: '贮存量',
                value: res.data.envProtect.solidWaste.storageCapacity,
                itemStyle: {
                  color: this.colorList1[1],
                  color1: this.colorList2[1]
                }
              },
              {
                name: '运输量',
                value: res.data.envProtect.solidWaste.transferAmount,
                itemStyle: {
                  color: this.colorList1[2],
                  color1: this.colorList2[2]
                }
              },
              {
                name: '处理量',
                value: res.data.envProtect.solidWaste.disposalVolume,
                itemStyle: {
                  color: this.colorList1[3],
                  color1: this.colorList2[3]
                }
              }
            ]

            this.option6XData = [
              '1月',
              '2月',
              '3月',
              '4月',
              '5月',
              '6月',
              '7月',
              '8月',
              '9月',
              '10月',
              '11月',
              '12月'
            ]
            this.option6Bar1Data = res.data.envProtect.govEnvPunishLastYearList
            this.option6Bar2Data = res.data.envProtect.govEnvPunishThisYearList

            this.option7XData = res.data.envProtect.monthList
            this.option7BarData = res.data.envProtect.monthDataList
            this.option7LineData = res.data.envProtect.qualifiedPerList

            this.echarts2ShowFlag = this.option2Data.length > 0
            this.echarts4ShowFlag = this.option4Data.length > 0
            this.echarts5ShowFlag = this.option5Data.length > 0
            this.echarts6ShowFlag = this.option6XData.length > 0
            this.echarts7ShowFlag = this.option7XData.length > 0

            this.renderMyChart1()
            this.renderMyChart2()
            this.renderMyChart3()
            this.renderMyChart4()
            this.renderMyChart5()
            this.renderMyChart6()
            this.renderMyChart7()

            this.getright_table('table1')
            this.getright_table('table2')
          } else {
            this.$message({ message: res.message, type: 'warning' })
          }
        })
    },
    // 浙江省地图
    renderMyChart1 () {
      let _this = this
      this.myChart1 = echarts.init(document.getElementById('annular1'))
      let uploadedDataURL = require('../zhejiang.json')
      echarts.registerMap('js', uploadedDataURL)

      this.option1 = {
        tooltip: {
          trigger: 'item',

          extraCssText: 'z-index: 9',
          backgroundColor: 'transparent',
          borderWidth: 0,
          padding: 0,
          textStyle: {
            color: '#00E4FF'
          },

          formatter: function (para) {
            if (para.seriesType === 'map') {
              if (para.data !== undefined) {
                return (
                  `<div style="position: relative;border:1px solid #00d3e7;background-color:rgba(10, 39, 116, .5);padding:5px">
                <div style="width: 10px;height: 10px;position:absolute;border-top: 3px solid #00d3e7;border-left: 3px solid #00d3e7;left: -3px;top: -3px;"></div>
                <div style="width: 10px;height: 10px;position:absolute;border-top: 3px solid #00d3e7;border-right: 3px solid #00d3e7;right: -3px;top: -3px;"></div>
                <div style="width: 10px;height: 10px;position:absolute;border-bottom:3px solid #00d3e7;border-right: 3px solid #00d3e7;right: -3px;bottom: -3px;"></div>
                <div style="width: 10px;height: 10px;position:absolute;border-bottom:3px solid #00d3e7;border-left: 3px solid #00d3e7;left: -3px;bottom: -3px;"></div>` +
                '<div style="color:#fcaf17;text-align: center;font-weight: 600">' +
                para.data.name +
                '</div>' +
                '<div style="color:#E4E4E4;font-size:12px;"><span style="display:inline-block;width:100px;">废气监测点</span><span style="display:inline-block;color:#00E4FF">' +
                para.data.gasCount +
                '</span></div>' +
                '<div style="color:#E4E4E4;font-size:12px;"><span style="display:inline-block;width:100px;">大气监测点</span><span style="display:inline-block;color:#00E4FF">' +
                para.data.airCount +
                '</span></div>' +
                '<div style="color:#E4E4E4;font-size:12px;"><span style="display:inline-block;width:100px;">污水监测点</span><span style="display:inline-block;color:#00E4FF">' +
                para.data.waterCount +
                '</span></div>' +
                `</div>`
                )
              }
            } else {
              if (para.data !== undefined) {
                return (
                  `<div style="position: relative;border:1px solid #00d3e7;background-color:rgba(10, 39, 116, .5);padding:5px">
                <div style="width: 10px;height: 10px;position:absolute;border-top: 3px solid #00d3e7;border-left: 3px solid #00d3e7;left: -3px;top: -3px;"></div>
                <div style="width: 10px;height: 10px;position:absolute;border-top: 3px solid #00d3e7;border-right: 3px solid #00d3e7;right: -3px;top: -3px;"></div>
                <div style="width: 10px;height: 10px;position:absolute;border-bottom:3px solid #00d3e7;border-right: 3px solid #00d3e7;right: -3px;bottom: -3px;"></div>
                <div style="width: 10px;height: 10px;position:absolute;border-bottom:3px solid #00d3e7;border-left: 3px solid #00d3e7;left: -3px;bottom: -3px;"></div>` +
                '<div style="color:#fcaf17;text-align: center;font-weight: 600">' +
                para.seriesName +
                ' : ' +
                para.data[2] +
                '</div></div>'
                )
              }
            }
          }
        },
        geo: [
          {
            map: 'js',
            roam: false, // 是否允许缩放
            zoom: 0.9, // 默认显示级别
            layoutSize: '100%',
            layoutCenter: ['50%', '50%'],
            itemStyle: {
              areaColor: '#113D8D',
              borderColor: 'rgb(27, 172, 255)',
              borderWidth: 1
            },
            emphasis: {
              itemStyle: {
                areaColor: '#005DDC'
              },
              label: {
                show: true,
                color: '#fff'
              }
            },
            label: {
              show: true,
              color: '#ffffff'
            },
            zlevel: 3
          }
        ],
        series: [
          {
            type: 'map',
            geoIndex: 0,
            data: this.option1Data
          },
          {
            name: '废气监测点',
            type: 'scatter',
            coordinateSystem: 'geo',
            itemStyle: {
              color: '#65D77B'
            },
            label: {
              normal: {
                show: true,
                color: '#fff',
                position: 'inside',
                fontSize: 10,
                formatter: function (para) {
                  return para.data[2]
                }
              }
            },
            symbol: 'circle',
            symbolOffset: [0, 20],
            symbolSize: 25,
            data: this.option1Scatter1Data,
            zlevel: 10
          }
        ]
      }
      this.myChart1.setOption(this.option1)
      this.autoPlay(_this.myChart1, _this.option1, 'echarts1Interval')
    },
    renderMyChart2 () {
      const _this = this
      this.myChart2 = echarts.init(document.getElementById('annular2'))
      var data = []
      var seriesOption = [{
        type: 'pie',
        radius: [0, '80%'],
        label: {
          show: false,
          color: '#09F9D0',
          lineHeight: 24
          // formatter: e => {
          //     return `${e.name}\n销售量: ${e.data.value}人\n良品率: ${e.data.rate}%`
          // }
        },
        labelLine: {
          length: 20,
          lineStyle: {
            color: '#09F9D0'
          }
        },
        itemStyle: {
          borderWidth: 2,
          borderColor: 'rgba(255,255,255,.5)',
          // 阴影
          shadowColor: 'rgba(0, 0, 0, .2)',
          shadowBlur: 6,
          shadowOffsetY: 4
        },
        data: []
      }
      ]
      for (let i = 0; i < _this.option2Data.length; i++) {
        let json = {
          type: 'bar',
          name: _this.option2Data[i].name,
          max: 100, // 100 的比例
          data: [65], // 控制半径占比
          barWidth: (_this.option2Data[i].value / _this.optionData2Total) * 100 + '%', // 控制和饼图角度一致
          barGap: 0,
          itemStyle: {
            color: _this.option2Data[i].itemStyle.color1,
            shadowColor: _this.option2Data[i].itemStyle.color1,
            shadowBlur: 6
          },
          coordinateSystem: 'polar'
        }
        data.push(
          {
            value: _this.option2Data[i].value,
            rate: _this.option2Data[i].value,
            name: _this.option2Data[i].name,
            itemStyle: {
              color: _this.option2Data[i].itemStyle.color
            }
          }
        )
        seriesOption.push(json)
      }
      seriesOption[0].data = data
      this.option2 = {
      // 背景颜色
      // backgroundColor: '#0D1223',
        tooltip: {
          trigger: 'item',
          confine: true,
          padding: [0, 5],
          backgroundColor: 'rgba(0,0,0,.5)',
          extraCssText: 'width:150px;color:#ffffff; white-space:pre-wrap;z-index: 100',
          formatter: function (params) {
            let percent = 0
            let total = 0
            for (let i = 0; i < _this.option2Data.length; i++) {
              total += _this.option2Data[i].value
            }
            percent = Number(((params.value / total) * 100).toFixed(0))
            if (params.name !== '') {
              return params.name + ' : ' + params.value + '个,占比 : ' + percent + '%'
            } else {
              return ''
            }
          }
        },
        angleAxis: {
          type: 'category',
          // 去掉边线
          axisLine: {
            show: false
          }
        },
        radiusAxis: {
          max: 100,
          // 去掉刻度线
          axisLine: {
            show: false
          },
          axisLabel: {
            show: false
          },
          axisTick: {
            show: false
          },
          splitLine: {
            show: false
          }
        },
        polar: {
          radius: [0, '80%']
        },
        series: seriesOption
      }
      this.myChart2.setOption(_this.option2, true)
      this.autoPlay(_this.myChart2, _this.option2, 'timer2')
    },
    renderMyChart3 () {
      const _this = this
      this.myChart3 = echarts.init(document.getElementById('annular3'))
      let angle = 0
      let value = _this.option3Data
      function getCirlPoint (x0, y0, r, angle) {
        let x1 = x0 + r * Math.cos((angle * Math.PI) / 180)
        let y1 = y0 + r * Math.sin((angle * Math.PI) / 180)
        return {
          x: x1,
          y: y1
        }
      }
      this.option3 = {
        title: {
          text: '{a|' + value + '}{c|%}\n{d|总体正常率}',
          x: 'center',
          y: '50px',
          textStyle: {
            rich: {
              a: {
                fontSize: 20,
                color: '#4FC0FF'
              },
              c: {
                fontSize: 16,
                color: '#4FC0FF'
                // padding: [5,0]
              },
              d: {
                fontSize: 10,
                color: '#ffffff',
                lineHeight: 16
              }
            }
          }
        },
        series: [
          {
            name: 'ring5',
            type: 'custom',
            coordinateSystem: 'none',
            renderItem: function (params, api) {
              return {
                type: 'arc',
                shape: {
                  cx: api.getWidth() / 2,
                  cy: api.getHeight() / 2,
                  r: (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.75,
                  startAngle: ((0 + angle) * Math.PI) / 180,
                  endAngle: ((90 + angle) * Math.PI) / 180
                },
                style: {
                  stroke: '#0CD3DB',
                  fill: 'transparent',
                  lineWidth: 1.5
                },
                silent: true
              }
            },
            data: [0]
          },
          {
            name: 'ring5',
            type: 'custom',
            coordinateSystem: 'none',
            renderItem: function (params, api) {
              return {
                type: 'arc',
                shape: {
                  cx: api.getWidth() / 2,
                  cy: api.getHeight() / 2,
                  r: (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.75,
                  startAngle: ((180 + angle) * Math.PI) / 180,
                  endAngle: ((270 + angle) * Math.PI) / 180
                },
                style: {
                  stroke: '#0CD3DB',
                  fill: 'transparent',
                  lineWidth: 1.5
                },
                silent: true
              }
            },
            data: [0]
          },
          {
            name: 'ring5',
            type: 'custom',
            coordinateSystem: 'none',
            renderItem: function (params, api) {
              return {
                type: 'arc',
                shape: {
                  cx: api.getWidth() / 2,
                  cy: api.getHeight() / 2,
                  r: (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.85,
                  startAngle: ((270 + -angle) * Math.PI) / 180,
                  endAngle: ((40 + -angle) * Math.PI) / 180
                },
                style: {
                  stroke: '#0CD3DB',
                  fill: 'transparent',
                  lineWidth: 1.5
                },
                silent: true
              }
            },
            data: [0]
          },
          {
            name: 'ring5',
            type: 'custom',
            coordinateSystem: 'none',
            renderItem: function (params, api) {
              return {
                type: 'arc',
                shape: {
                  cx: api.getWidth() / 2,
                  cy: api.getHeight() / 2,
                  r: (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.85,
                  startAngle: ((90 + -angle) * Math.PI) / 180,
                  endAngle: ((220 + -angle) * Math.PI) / 180
                },
                style: {
                  stroke: '#0CD3DB',
                  fill: 'transparent',
                  lineWidth: 1.5
                },
                silent: true
              }
            },
            data: [0]
          },
          {
            name: 'ring5',
            type: 'custom',
            coordinateSystem: 'none',
            renderItem: function (params, api) {
              let x0 = api.getWidth() / 2
              let y0 = api.getHeight() / 2
              let r = (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.85
              let point = getCirlPoint(x0, y0, r, 90 + -angle)
              return {
                type: 'circle',
                shape: {
                  cx: point.x,
                  cy: point.y,
                  r: 4
                },
                style: {
                  stroke: '#0CD3DB', // 粉
                  fill: '#0CD3DB'
                },
                silent: true
              }
            },
            data: [0]
          },
          {
            name: 'ring5', // 绿点
            type: 'custom',
            coordinateSystem: 'none',
            renderItem: function (params, api) {
              let x0 = api.getWidth() / 2
              let y0 = api.getHeight() / 2
              let r = (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.85
              let point = getCirlPoint(x0, y0, r, 270 + -angle)
              return {
                type: 'circle',
                shape: {
                  cx: point.x,
                  cy: point.y,
                  r: 4
                },
                style: {
                  stroke: '#0CD3DB', // 绿
                  fill: '#0CD3DB'
                },
                silent: true
              }
            },
            data: [0]
          },
          {
            type: 'pie',
            radius: ['68%', '55%'],
            silent: true,
            clockwise: true,
            startAngle: 90,
            z: 0,
            zlevel: 0,
            label: {
              normal: {
                position: 'center'
              }
            },
            data: [
              {
                value: value,
                name: '',
                itemStyle: {
                  normal: {
                    color: '#4FC0FF'
                  }
                }
              },
              {
                value: 100 - value,
                name: '',
                label: {
                  normal: {
                    show: false
                  }
                },
                itemStyle: {
                  normal: {
                    color: '#5F83FF'
                  }
                }
              }
            ]
          },
          {
            name: '',
            type: 'gauge',
            radius: '58%',
            center: ['50%', '50%'],
            startAngle: 0,
            endAngle: 359.9,
            splitNumber: 8,
            hoverAnimation: true,
            axisTick: {
              show: false
            },
            splitLine: {
              show: false,
              length: 60,
              lineStyle: {
                width: 5,
                color: '#061740'
              }
            },
            axisLabel: {
              show: false
            },
            pointer: {
              show: false
            },
            axisLine: {
              lineStyle: {
                opacity: 0
              }
            },
            detail: {
              show: false
            },
            data: [
              {
                value: 0,
                name: ''
              }
            ]
          }
        ]
      }
      this.myChart3.setOption(this.option3)
      function draw () {
        angle = angle + 3
        _this.myChart3.setOption(_this.option3, true)
        // window.requestAnimationFrame(draw);
      }
      setTimeout(() => {
        _this.echarts1Interval = setInterval(function () {
          draw()
        }, 50)
      }, 1000)
    },
    renderMyChart4 () {
      let _this = this
      this.myChart4 = echarts.init(document.getElementById('annular4'))

      let angle = 0 // 角度，用来做简单的动画效果的
      var outerRidus1 = 0.8
      var outerRidus2 = 0.85
      var data = []
      var data1 = []
      var seriesOption = [// 最外层圆
        {
          type: 'pie',
          radius: ['65%', '45%'],
          center: ['50%', '50%'],
          // hoverAnimation: false,
          data: [],
          label: {
            show: false,
            position: 'outside',
            formatter: '{d}%',
            color: '#FFFFFF'
          },
          labelLine: {
            normal: {
              length: 80,
              lineStyle: {
                width: 1
              }
            }
          }
        },
        // 内圆 + 中间文字
        {
          type: 'pie',
          radius: ['50%', '30%'],
          center: ['50%', '50%'],
          // hoverAnimation: false,
          // z: 10,
          label: {
            show: false,
            position: 'center',
            formatter: () => {
              return '佣金总额\r\n{total|100} 个'
            },
            rich: {
              total: {
                fontSize: 24,
                color: '#FFFFFF'
              }
            },
            color: '#FFFFFF',
            fontSize: 16,
            lineHeight: 30
          },
          data: [],
          labelLine: {
            show: false
          }
        }
      ]
      for (let i = 0; i < _this.option4Data.length; i++) {
        data.push(
          {
            value: _this.option4Data[i].value,
            name: _this.option4Data[i].name,
            itemStyle: {
              normal: {
                color: {
                  // 完成的圆环的颜色
                  colorStops: [
                    {
                      offset: 0,
                      color: _this.option4Data[i].itemStyle.color1 // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: _this.option4Data[i].itemStyle.color // 100% 处的颜色
                    }
                  ]
                }
              }
            }
          }
        )
        data1.push({
          value: _this.option4Data[i].value,
          name: _this.option4Data[i].name,
          itemStyle: {
            normal: {
              color: {
                // 完成的圆环的颜色
                colorStops: [
                  {
                    offset: 0,
                    color: _this.option4Data[i].itemStyle.color1 // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: _this.option4Data[i].itemStyle.color // 100% 处的颜色
                  }
                ]
              },
              opacity: 0.5
            }
          }
        }
        )
        // seriesOption.push(json)
      }
      seriesOption[0].data = data
      seriesOption[1].data = data1
      this.option4 = {
        title: {
          text: '固体废物处理',
          top: 0,
          left: 0,
          textStyle: {
            width: '100%',
            color: '#52CCFF',
            fontSize: 14,
            fontWeight: 600
          }
        },
        tooltip: {
          trigger: 'item',
          confine: true,
          padding: [0, 5],
          backgroundColor: 'rgba(0,0,0,.5)',
          extraCssText: 'width:150px;color:#ffffff; white-space:pre-wrap;z-index: 100',
          formatter: function (params) {
            let percent = 0
            let total = 0
            for (let i = 0; i < _this.option4Data.length; i++) {
              total += _this.option4Data[i].value
            }
            percent = Number(((params.value / total) * 100).toFixed(0))
            if (params.name !== '') {
              return params.name + ' : ' + params.value + '个,占比 : ' + percent + '%'
            } else {
              return ''
            }
          }
        },
        series: seriesOption
      }

      // 获取圆上面某点的坐标(x0,y0表示坐标，r半径，angle角度)
      function getCirlPoint (x0, y0, r, angle) {
        let x1 = x0 + r * Math.cos((angle * Math.PI) / 180)
        let y1 = y0 + r * Math.sin((angle * Math.PI) / 180)
        return {
          x: x1,
          y: y1
        }
      }
      this.myChart4.setOption(this.option4, true)
      this.autoPlay(_this.myChart4, _this.option4, 'timer4')
    },
    renderMyChart5 () {
      this.myChart5 = echarts.init(document.getElementById('annular5'))
      var _this = this
      let angle = 0 // 角度，用来做简单的动画效果的
      var outerRidus1 = 0.8
      var outerRidus2 = 0.85
      var data = []
      var data1 = []

      var seriesOption = [// 最外层圆
        {
          type: 'pie',
          radius: ['65%', '45%'],
          center: ['50%', '50%'],
          // hoverAnimation: false,
          data: [],
          label: {
            show: false,
            position: 'outside',
            formatter: '{d}%',
            color: '#FFFFFF'
          },
          labelLine: {
            normal: {
              length: 80,
              lineStyle: {
                width: 1
              }
            }
          }
        },
        // 内圆 + 中间文字
        {
          type: 'pie',
          radius: ['50%', '30%'],
          center: ['50%', '50%'],
          // hoverAnimation: false,
          // z: 10,
          label: {
            show: false,
            position: 'center',
            formatter: () => {
              return '佣金总额\r\n{total|100} 个'
            },
            rich: {
              total: {
                fontSize: 24,
                color: '#FFFFFF'
              }
            },
            color: '#FFFFFF',
            fontSize: 16,
            lineHeight: 30
          },
          data: [],
          labelLine: {
            show: false
          }
        }
      ]
      for (let i = 0; i < _this.option5Data.length; i++) {
        data.push(
          {
            value: _this.option5Data[i].value,
            name: _this.option5Data[i].name,
            itemStyle: {
              normal: {
                color: {
                  // 完成的圆环的颜色
                  colorStops: [
                    {
                      offset: 0,
                      color: _this.option5Data[i].itemStyle.color1 // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: _this.option5Data[i].itemStyle.color // 100% 处的颜色
                    }
                  ]
                }
              }
            }
          }
        )
        data1.push({
          value: _this.option5Data[i].value,
          name: _this.option5Data[i].name,
          itemStyle: {
            normal: {
              color: {
                // 完成的圆环的颜色
                colorStops: [
                  {
                    offset: 0,
                    color: _this.option5Data[i].itemStyle.color1 // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: _this.option5Data[i].itemStyle.color // 100% 处的颜色
                  }
                ]
              },
              opacity: 0.5
            }
          }
        }
        )
        // seriesOption.push(json)
      }
      seriesOption[0].data = data
      seriesOption[1].data = data1

      this.option5 = {
        title: {
          text: '危险废物处理',
          top: 0,
          left: 0,
          textStyle: {
            width: '100%',
            color: '#52CCFF',
            fontSize: 14,
            fontWeight: 600
          }
        },
        tooltip: {
          trigger: 'item',
          confine: true,
          padding: [0, 5],
          backgroundColor: 'rgba(0,0,0,.5)',
          extraCssText: 'width:150px;color:#ffffff; white-space:pre-wrap;z-index: 100',
          formatter: function (params) {
            let percent = 0
            let total = 0
            for (let i = 0; i < _this.option5Data.length; i++) {
              total += _this.option5Data[i].value
            }
            percent = Number(((params.value / total) * 100).toFixed(0))
            if (params.name !== '') {
              return params.name + ' : ' + params.value + '个,占比 : ' + percent + '%'
            } else {
              return ''
            }
          }
        },
        series: seriesOption
      }

      // 获取圆上面某点的坐标(x0,y0表示坐标，r半径，angle角度)
      function getCirlPoint (x0, y0, r, angle) {
        let x1 = x0 + r * Math.cos((angle * Math.PI) / 180)
        let y1 = y0 + r * Math.sin((angle * Math.PI) / 180)
        return {
          x: x1,
          y: y1
        }
      }
      this.myChart5.setOption(this.option5, true)
      this.autoPlay(_this.myChart5, _this.option5, 'timer5')
    },
    renderMyChart6 () {
      let _this = this
      this.myChart6 = echarts.init(document.getElementById('annular6'))
      let thisYear = new Date().getFullYear()
      let lastYear = new Date().getFullYear() - 1
      this.option6 = {
        animationDuration: 5000,
        legend: {
          show: true,
          right: '10',
          textStyle: {
            // 图例文字的样式
            color: '#fff'
          }
        },
        tooltip: {
          trigger: 'axis'
        },
        color: ['#13B9FB'],
        dataZoom: [
          {
            type: 'inside',
            startValue: 0,
            endValue: 5,
            xAxisIndex: [0],
            zoomLock: true
          }
        ],
        grid: {
          left: '3%',
          right: '3%',
          bottom: '2%',
          top: '20%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            axisTick: {
              show: false
            },
            axisLabel: {
              interval: 0
            },
            axisLine: {
              // 这是y轴文字颜色
              lineStyle: {
                color: '#BFF7FF'
              }
            },
            data: this.option6XData
          }
        ],
        yAxis: {
          type: 'value',
          splitLine: {
            lineStyle: {
              color: '#8DAFDD'
            }
          },
          axisLine: {
            // 这是y轴文字颜色
            lineStyle: {
              color: '#BFF7FF'
            }
          }
        },
        series: [
          {
            name: lastYear,
            type: 'bar',
            barWidth: 15,
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 1, 1, [
                {
                  offset: 0,
                  color: '#02C6FF  '
                },
                {
                  offset: 1,
                  color: 'rgba(2, 198, 255, 0)'
                }
              ])
            },

            data: this.option6Bar1Data
          },
          {
            name: thisYear,
            type: 'bar',
            barWidth: 15,
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 1, 1, [
                {
                  offset: 0,
                  color: '#32D5A5  '
                },
                {
                  offset: 1,
                  color: 'rgba(2, 198, 255, 0) '
                }
              ])
            },
            data: this.option6Bar2Data
          }
        ]
      }
      this.myChart6.setOption(this.option6)
      this.autoPlay(_this.myChart6, _this.option6, 'startCharts6')
    },
    renderMyChart7 () {
      this.myChart7 = echarts.init(document.getElementById('annular7'))
      this.option7 = {
        animationDuration: 5000,
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          show: true,
          right: '10',
          textStyle: {
            // 图例文字的样式
            color: '#fff'
          }
        },
        dataZoom: [
          {
            type: 'inside',
            startValue: 0,
            endValue: 6,
            xAxisIndex: [0],
            zoomLock: true
          }
        ],
        grid: {
          left: '2%',
          right: '2%',
          bottom: '2%',
          top: '25%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            axisTick: {
              show: false
            },
            axisLabel: {
              interval: 0
            },
            axisLine: {
              // 这是y轴文字颜色
              lineStyle: {
                color: '#BFF7FF'
              }
            },
            data: this.option7XData
          }
        ],
        yAxis: {
          type: 'value',
          name: '排放量/万吨',
          splitLine: {
            lineStyle: {
              color: '#8DAFDD'
            }
          },
          axisLine: {
            // 这是y轴文字颜色
            lineStyle: {
              color: '#BFF7FF'
            }
          }
        },
        series: [
          {
            type: 'bar',
            name: '排放量',
            barWidth: 15,
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 1, 1, [
                {
                  offset: 0,
                  color: '#02C6FF'
                },
                {
                  offset: 1,
                  color: 'rgba(2, 198, 255, 0)'
                }
              ])
            },
            data: this.option7BarData
          },
          {
            type: 'line',
            name: '合格率',
            itemStyle: {
              color: '#F87C02'
            },
            data: this.option7LineData
          }
        ]
      }
      this.myChart7.setOption(this.option7)
      this.autoPlay(this.myChart7, this.option7, 'startCharts7')
    },
    mapAutoPlay (myChart, option, timer) {
      var _this = this
      let flag = true
      let charPiecurrentIndex = 0
      // 鼠标移动上去的时候的高亮动画
      myChart.on('mouseover', function (param) {
        if (param.componentType === 'series') {
          flag = false
          clearInterval(timer)
          // 取消之前高亮图形
          myChart.dispatchAction({
            type: 'downplay',
            seriesIndex: 0,
            dataIndex: charPiecurrentIndex
          })

          charPiecurrentIndex = param.dataIndex
          //* *解决文章所述问题**// //记录上一次选中值重新进入时取消高亮
          let data = option.series[0].data[charPiecurrentIndex]
          if (data) {
            _this.parkInfo.parkName = data[2]
            _this.parkInfo.entQty = data[3]
            _this.parkInfo.address = data[4]
            _this.parkInfo.primeMoverIndustry = data[5]
            _this.parkInfo.parkMainIncome = data[6]
          }

          // 高亮当前图形
          myChart.dispatchAction({
            type: 'highlight',
            seriesIndex: 0,
            dataIndex: param.dataIndex
          })

          myChart.dispatchAction({
            type: 'showTip',
            seriesIndex: 0,
            dataIndex: param.dataIndex
          })
        }
      })

      // 图标随窗口大小缩放
      window.addEventListener('resize', function () {
        myChart.resize()
      })

      // 自动高亮显示
      var chartHover = function () {
        var dataLen = option.series[0].data.length

        // 取消之前高亮的图形
        myChart.dispatchAction({
          type: 'downplay',
          seriesIndex: 0,
          dataIndex: charPiecurrentIndex
        })
        charPiecurrentIndex = (charPiecurrentIndex + 1) % dataLen

        let data = option.series[0].data[charPiecurrentIndex]
        _this.parkInfo.parkName = data[2]
        _this.parkInfo.entQty = data[3]
        _this.parkInfo.address = data[4]
        _this.parkInfo.primeMoverIndustry = data[5]
        _this.parkInfo.parkMainIncome = data[6]

        // 高亮当前图形
        myChart.dispatchAction({
          type: 'highlight',
          seriesIndex: 0,
          dataIndex: charPiecurrentIndex
        })
        // 显示 tooltip
        myChart.dispatchAction({
          type: 'showTip',
          seriesIndex: 0,
          dataIndex: charPiecurrentIndex
        })
      }

      // 高亮当前图形
      myChart.dispatchAction({
        type: 'highlight',
        seriesIndex: 0,
        dataIndex: 0
      })

      timer = setInterval(chartHover, 5000)
      // 4、鼠标移出之后，恢复自动高亮
      myChart.on('mouseout', function (param) {
        if (!flag) {
          timer = setInterval(chartHover, 5000)
          flag = true
        }
      })
    },
    autoPlay (myChart, option, timer) {
      var _this = this
      let flag = true
      let charPiecurrentIndex = 0
      // 鼠标移动上去的时候的高亮动画
      myChart.on('mouseover', function (param) {
        flag = false
        clearInterval(_this[timer])
        // 取消之前高亮图形
        myChart.dispatchAction({
          type: 'downplay',
          seriesIndex: 0,
          dataIndex: charPiecurrentIndex
        })

        charPiecurrentIndex = param.dataIndex
        // **解决文章所述问题**// //记录上一次选中值重新进入时取消高亮

        // 高亮当前图形
        myChart.dispatchAction({
          type: 'highlight',
          seriesIndex: 0,
          dataIndex: param.dataIndex
        })

        myChart.dispatchAction({
          type: 'showTip',
          seriesIndex: 0,
          dataIndex: param.dataIndex
        })
      })

      // 图标随窗口大小缩放
      window.addEventListener('resize', function () {
        myChart.resize()
      })

      // 自动高亮显示
      var chartHover = function () {
        var dataLen = option.series[0].data.length

        // 取消之前高亮的图形
        myChart.dispatchAction({
          type: 'downplay',
          seriesIndex: 0,
          dataIndex: charPiecurrentIndex
        })
        charPiecurrentIndex = (charPiecurrentIndex + 1) % dataLen

        // 高亮当前图形
        myChart.dispatchAction({
          type: 'highlight',
          seriesIndex: 0,
          dataIndex: charPiecurrentIndex
        })
        // 显示 tooltip
        myChart.dispatchAction({
          type: 'showTip',
          seriesIndex: 0,
          dataIndex: charPiecurrentIndex
        })
      }

      _this[timer] = setInterval(chartHover, 2000)
      // 4、鼠标移出之后，恢复自动高亮
      myChart.on('mouseout', function (param) {
        if (!flag) {
          _this[timer] = setInterval(chartHover, 2000)
          flag = true
        }
      })
      this.$once('hook:beforeDestroy', () => {
        clearInterval(_this[timer])
        _this[timer] = null
      })
    },
    tableRowClassName ({ row, column, rowIndex }) {
      if (rowIndex % 2 === 0) {
        return 'table-row1'
      } else {
        return 'table-row2'
      }
    },
    getright_table (tableRef) {
      var isScroll = true
      // 拿到表格挂载后的真实DOM
      const table = this.$refs[tableRef]
      // 拿到表格中承载数据的div元素
      const divData = table.bodyWrapper
      this.addEvent(divData, 'mouseenter', function () {
        isScroll = false
      })
      this.addEvent(divData, 'mouseleave', function () {
        isScroll = true
      })
      this[tableRef + 'Interval'] = setInterval(() => {
        if (isScroll) {
          // 元素自增距离顶部1像素
          divData.scrollTop += 1
          // 判断元素是否滚动到底部(可视高度+距离顶部=整个高度)
          if (
            divData.clientHeight + divData.scrollTop + 1 >=
            divData.scrollHeight
          ) {
            // 重置table距离顶部距离
            divData.scrollTop = 0
          }
        }
      }, 100)
    },
    addEvent (obj, sEvent, fn) {
      if (obj.attachEvent) {
        obj.attachEvent('on' + sEvent, fn)
      } else {
        obj.addEventListener(sEvent, fn, false)
      }
    },
    activeClick1 (value) {
      this.activeTab1 = value
      this.$http
        .post(`/home/government/govEnvProtect/envProtect`, {
          gasType: this.activeTab1,
          airType: this.activeTab2
        })
        .then(({ data: res }) => {
          if (res && res.code === 0) {
            this.tableData1 = res.data.envProtect.gasRankList
            if (value === 'AQI') {
              this.ppm2 = 'AQI'
            } else if (value === 'CO') {
              this.ppm2 = 'mg/m³'
            } else {
              this.ppm2 = 'μg/m³'
            }
          } else {
            this.$message({ message: res.message, type: 'warning' })
          }
        })
    },
    activeClick2 (value) {
      this.activeTab2 = value
      this.$http
        .post(`/home/government/govEnvProtect/envProtect`, {
          gasType: this.activeTab1,
          airType: this.activeTab2
        })
        .then(({ data: res }) => {
          if (res && res.code === 0) {
            this.tableData2 = res.data.envProtect.airQualityRankList
            const table = this.$refs.table2
            const divData = table.bodyWrapper
            divData.scrollTop = 0

            if (value === 'AQI') {
              this.ppm1 = 'AQI'
            } else if (value === 'CO') {
              this.ppm1 = 'mg/m³'
            } else {
              this.ppm1 = 'μg/m³'
            }
          } else {
            this.$message({ message: res.message, type: 'warning' })
          }
        })
    },
    getPie3D (pieData, internalDiameterRatio, title, alpha, distance) {
      // internalDiameterRatio:透明的空心占比
      let that = this
      let series = []
      let sumValue = 0
      let startValue = 0
      let endValue = 0
      let legendData = []
      let legendBfb = []
      let k = 1 - internalDiameterRatio
      pieData.sort((a, b) => {
        return b.value - a.value
      })
      // 为每一个饼图数据，生成一个 series-surface 配置
      for (let i = 0; i < pieData.length; i++) {
        sumValue += pieData[i].value
        let seriesItem = {
          name:
            typeof pieData[i].name === 'undefined'
              ? `series${i}`
              : pieData[i].name,
          type: 'surface',
          parametric: true,
          wireframe: {
            show: false
          },
          pieData: pieData[i],
          pieStatus: {
            selected: false,
            hovered: false,
            k: k
          },
          center: ['10%', '50%']
        }

        if (typeof pieData[i].itemStyle !== 'undefined') {
          let itemStyle = {}
          // eslint-disable-next-line no-unused-expressions
          typeof pieData[i].itemStyle.color !== 'undefined'
            ? (itemStyle.color = pieData[i].itemStyle.color)
            : null
          // eslint-disable-next-line no-unused-expressions
          typeof pieData[i].itemStyle.opacity !== 'undefined'
            ? (itemStyle.opacity = pieData[i].itemStyle.opacity)
            : null
          seriesItem.itemStyle = itemStyle
        }
        series.push(seriesItem)
      }

      // 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
      // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
      legendData = []
      legendBfb = []
      if (sumValue === 0) {
        sumValue = 1
      }
      for (let i = 0; i < series.length; i++) {
        endValue = startValue + series[i].pieData.value
        series[i].pieData.startRatio = startValue / sumValue
        series[i].pieData.endRatio = endValue / sumValue
        series[i].parametricEquation = this.getParametricEquation(
          series[i].pieData.startRatio,
          series[i].pieData.endRatio,
          false,
          false,
          k,
          series[i].pieData.value
        )
        startValue = endValue
        let bfb = that.fomatFloat(series[i].pieData.value / sumValue, 4)
        legendData.push({
          name: series[i].name,
          value: bfb
        })
        legendBfb.push({
          name: series[i].name,
          value: bfb
        })
      }
      let boxHeight = this.getHeight3D(series, 40) // 通过传参设定3d饼/环的高度，26代表26px
      // 准备待返回的配置项，把准备好的 legendData、series 传入。
      let option = {
        animationDuration: 5000,
        // legend: {
        //   data: legendData,
        //   orient: 'horizontal',
        //   type:'scroll',
        //   pageTextStyle: {
        //     color: "#A1E2FF"
        //   },
        //   pageIconColor: "#29bca8", // 可以点击的翻页按钮颜色
        //   pageIconInactiveColor: "#7f7f7f", // 禁用的按钮颜色
        //   left: 10,
        //   bottom: 10,
        //   itemGap: 10,
        //   textStyle: {
        //       color: '#A1E2FF',
        //   },
        //   show: true,
        //   itemHeight: 14,
        //   itemWidth: 14,
        // formatter: function(param) {
        //     let item = legendBfb.filter(item => item.name == param)[0];
        //     let bfs = that.fomatFloat(item.value * 100, 2) + "%";
        //     return `${item.name}  ${bfs}`;
        // }
        // },
        title: {
          text: title,
          top: 0,
          left: '10px',
          textStyle: {
            width: '100%',
            color: '#52CCFF',
            fontSize: 14,
            fontWeight: 600
          }
        },
        tooltip: {
          confine: true,
          padding: [0, 5],
          formatter: (params) => {
            if (
              params.seriesName !== 'mouseoutSeries' &&
              params.seriesName !== 'pie2d'
            ) {
              // let bfb = ((option.series[params.seriesIndex].pieData.endRatio - option.series[params.seriesIndex].pieData.startRatio) *
              //   100).toFixed(2);
              return (
                `${params.seriesName}<br/>` +
                `<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${params.color};"></span>` +
                `${option.series[params.seriesIndex].pieData.value}个`
              )
            }
          }
        },
        xAxis3D: {
          min: -1,
          max: 1
        },
        yAxis3D: {
          min: -1,
          max: 1
        },
        zAxis3D: {
          min: -1,
          max: 2
        },
        grid3D: {
          show: false,
          boxHeight: boxHeight, // 圆环的高度
          viewControl: {
            // 3d效果可以放大、旋转等，请自己去查看官方配置
            alpha: alpha, // 角度
            distance: distance, // 调整视角到主体的距离，类似调整zoom
            rotateSensitivity: 0, // 设置为0无法旋转
            zoomSensitivity: 0, // 设置为0无法缩放
            panSensitivity: 0, // 设置为0无法平移
            autoRotate: false // 自动旋转
          }
        },
        series: series
      }
      return option
    },

    // 获取3d丙图的最高扇区的高度
    getHeight3D (series, height) {
      series.sort((a, b) => {
        return b.pieData.value - a.pieData.value
      })
      return (height * 25) / series[0].pieData.value
    },
    // 生成扇形的曲面参数方程，用于 series-surface.parametricEquation
    getParametricEquation (startRatio, endRatio, isSelected, isHovered, k, h) {
      // 计算
      let midRatio = (startRatio + endRatio) / 2
      let startRadian = startRatio * Math.PI * 2
      let endRadian = endRatio * Math.PI * 2
      let midRadian = midRatio * Math.PI * 2
      // 如果只有一个扇形，则不实现选中效果。
      if (startRatio === 0 && endRatio === 1) {
        isSelected = false
      }
      // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
      k = typeof k !== 'undefined' ? k : 1 / 3
      // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
      let offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0
      let offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0
      // 计算高亮效果的放大比例（未高亮，则比例为 1）
      let hoverRate = isHovered ? 1.2 : 1
      // 返回曲面参数方程
      return {
        u: {
          min: -Math.PI,
          max: Math.PI * 3,
          step: Math.PI / 32
        },
        v: {
          min: 0,
          max: Math.PI * 2,
          step: Math.PI / 20
        },
        x: function (u, v) {
          if (u < startRadian) {
            return (
              offsetX +
              Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate
            )
          }
          if (u > endRadian) {
            return (
              offsetX + Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate
            )
          }
          return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate
        },
        y: function (u, v) {
          if (u < startRadian) {
            return (
              offsetY +
              Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate
            )
          }
          if (u > endRadian) {
            return (
              offsetY + Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate
            )
          }
          return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate
        },
        z: function (u, v) {
          if (u < -Math.PI * 0.5) {
            return Math.sin(u)
          }
          if (u > Math.PI * 2.5) {
            return Math.sin(u) * h * 0.1
          }
          return Math.sin(v) > 0 ? 1 * h * 0.1 : -1
        }
      }
    },
    fomatFloat (num, n) {
      var f = parseFloat(num)
      if (isNaN(f)) {
        return false
      }
      f = Math.round(num * Math.pow(10, n)) / Math.pow(10, n) // n 幂
      var s = f.toString()
      var rs = s.indexOf('.')
      // 判定如果是整数，增加小数点再补0
      if (rs < 0) {
        rs = s.length
        s += '.'
      }
      while (s.length <= rs + n) {
        s += '0'
      }
      return s
    },
    bindListen (myChart, option, num, timer) {
      // 监听鼠标事件，实现饼图选中效果（单选），近似实现高亮（放大）效果。
      let that = this
      let flag = true
      // let selectedIndex = '';
      let hoveredIndex = ''
      let seriesIndex = 0
      // eslint-disable-next-line no-unused-vars
      let seriesName = ''
      // eslint-disable-next-line no-unused-vars
      let dataIndex = 0
      // 监听 mouseover，近似实现高亮（放大）效果
      myChart.on('mouseover', function (params) {
        clearInterval(that[timer])
        flag = false
        seriesIndex = params.seriesIndex
        seriesName = params.seriesName
        let isSelected
        let isHovered
        let startRatio
        let endRatio
        let k
        // 如果触发 mouseover 的扇形当前已高亮，则不做操作
        if (hoveredIndex === params.seriesIndex) {

          // 否则进行高亮及必要的取消高亮操作
        } else {
          if (hoveredIndex !== '') {
            // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 false。
            isSelected = option.series[hoveredIndex].pieStatus.selected
            isHovered = false
            startRatio = option.series[hoveredIndex].pieData.startRatio
            endRatio = option.series[hoveredIndex].pieData.endRatio
            k = option.series[hoveredIndex].pieStatus.k
            // 对当前点击的扇形，执行取消高亮操作（对 option 更新）
            option.series[hoveredIndex].parametricEquation =
              that.getParametricEquation(
                startRatio,
                endRatio,
                isSelected,
                isHovered,
                k,
                option.series[hoveredIndex].pieData.value
              )
            option.series[hoveredIndex].pieStatus.hovered = isHovered
            // 将此前记录的上次选中的扇形对应的系列号 seriesIndex 清空
            hoveredIndex = ''
          }
          isSelected = option.series[seriesIndex].pieStatus.selected
          isHovered = true
          startRatio = option.series[seriesIndex].pieData.startRatio
          endRatio = option.series[seriesIndex].pieData.endRatio
          k = option.series[seriesIndex].pieStatus.k
          // 对当前点击的扇形，执行高亮操作（对 option 更新）
          option.series[seriesIndex].parametricEquation =
            that.getParametricEquation(
              startRatio,
              endRatio,
              isSelected,
              isHovered,
              k,
              option.series[seriesIndex].pieData.value + 5
            )
          option.series[seriesIndex].pieStatus.hovered = isHovered
          that['legendColor' + num] = option.series[seriesIndex].itemStyle.color
          that['legendValue' + num] =
            option.series[seriesIndex].name +
            ' : ' +
            (
              (option.series[seriesIndex].pieData.endRatio -
                option.series[seriesIndex].pieData.startRatio) *
              100
            ).toFixed(2) +
            '%'
          // 记录上次高亮的扇形对应的系列号 seriesIndex
          hoveredIndex = seriesIndex
          myChart.setOption(option)
        }
      })
      var chartHover = function () {
        // 准备重新渲染扇形所需的参数
        let isSelected
        let isHovered
        let startRatio
        let endRatio
        let k
        // 如果当前有高亮的扇形，取消其高亮状态（对 option 更新）
        if (seriesIndex === option.series.length) {
          seriesIndex = 0
        }
        if (hoveredIndex !== '') {
          // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 false。
          isSelected = option.series[hoveredIndex].pieStatus.selected
          isHovered = false
          startRatio = option.series[hoveredIndex].pieData.startRatio
          endRatio = option.series[hoveredIndex].pieData.endRatio
          k = option.series[hoveredIndex].pieStatus.k
          // 对当前点击的扇形，执行取消高亮操作（对 option 更新）
          option.series[hoveredIndex].parametricEquation =
            that.getParametricEquation(
              startRatio,
              endRatio,
              isSelected,
              isHovered,
              k,
              option.series[hoveredIndex].pieData.value
            )
          option.series[hoveredIndex].pieStatus.hovered = isHovered
          // 将此前记录的上次选中的扇形对应的系列号 seriesIndex 清空
          hoveredIndex = ''
        }
        // 如果触发 mouseover 的扇形不是透明圆环，将其高亮（对 option 更新）
        isSelected = option.series[seriesIndex].pieStatus.selected
        isHovered = true
        startRatio = option.series[seriesIndex].pieData.startRatio
        endRatio = option.series[seriesIndex].pieData.endRatio
        k = option.series[seriesIndex].pieStatus.k
        // 对当前点击的扇形，执行高亮操作（对 option 更新）
        option.series[seriesIndex].parametricEquation =
          that.getParametricEquation(
            startRatio,
            endRatio,
            isSelected,
            isHovered,
            k,
            option.series[seriesIndex].pieData.value + 5
          )
        option.series[seriesIndex].pieStatus.hovered = isHovered
        that['legendColor' + num] = option.series[seriesIndex].itemStyle.color
        that['legendValue' + num] =
          option.series[seriesIndex].name +
          ' : ' +
          (
            (option.series[seriesIndex].pieData.endRatio -
              option.series[seriesIndex].pieData.startRatio) *
            100
          ).toFixed(2) +
          '%'
        // 记录上次高亮的扇形对应的系列号 seriesIndex
        hoveredIndex = seriesIndex
        // 使用更新后的 option，渲染图表
        myChart.setOption(option)
        seriesIndex++
      }
      // 修正取消高亮失败的 bug
      myChart.on('globalout', function () {
        if (!flag) {
          that[timer] = setInterval(chartHover, 5000)
          flag = true
        }
      })
      that[timer] = setInterval(chartHover, 5000)
    },
    // 计算数组所占百分比
    countPercentage (countArray) {
      let j = 0
      countArray.forEach((i) => {
        j += i
      })
      var resultArray = []
      for (var i = 0; i < countArray.length; i++) {
        var k = ((countArray[i] / j) * 100).toFixed(2) + '%'
        resultArray.push(k)
      }
      return resultArray
    }
  }
}
</script>
<style lang="scss" scoped>
.main {
  background-size: 100% 100%;
  background: #041565;
}
.box {
  padding: 10px;
  margin-bottom: 10px;
  background-image: url('../../../../assets/img/industry/框尺寸1.png');
  background-size: 100% 100%;
  overflow: hidden;
}
.box2 {
  background-image: url('../../../../assets/img/industry/bigk.png');
  background-size: 100% 100%;
}
.title {
  width: 290px;
  background-image: url('../../../../assets/img/industry/小标题背景1.png');
  background-size: 100% 100%;
  color: #ffffff;
  margin-left: 20px;

  font-weight: 700;
  font-size: 14px;
  p {
    margin-left: 25px;
    font-size: 12px;
  }
}
.content {
  width: 100%;
  padding: 10px;
  padding-bottom: 12px;
}
.content-body {
  padding: 5px;
  margin-top: 5px;
  overflow: hidden;
  > div {
    float: left;
    overflow: hidden;
  }
}
.craft-body {
  float: left;
  width: 47.5%;
  background: url('../../../../assets/img/industry/数据背景框2.png');
  background-size: 100% 100%;
  border-radius: 6px;
  padding: 10px;
  .craft-title {
    width: 100%;
    height: 16px;
    margin-bottom: 10px;
  }
  .craft-value {
    color: #ffca12;
    font-size: 16px;
    font-weight: 600;
    text-align: center;
    width: 100%;
    color: #ffffff;
    background-image: -webkit-linear-gradient(#fff, #f0c41b, #fff, #f0c41b);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }
}
.chemicals-body {
  width: 47.5%;
  background: #e0ebfe;
  border: 2px solid #cadfff;
  border-radius: 6px;
  padding: 10px;
  .chemicals-value {
    color: #00a3ff;
    font-size: 16px;
    font-weight: 600;
    width: 100%;
    text-align: right;
  }
  .title-content {
    float: left;
    margin-left: 5px;
    color: #4b5463;
    font-size: 13px;
    line-height: 18px;
  }
}
.title-blue {
  width: 4px;
  height: 15px;
  background-color: #00a3ff;
  float: left;
}
.title-content {
  float: left;
  margin-left: 5px;
  color: #fff;
  font-size: 13px;
  line-height: 15px;
}

.source-body {
  float: right;
  width: 43%;
  height: 230px;
  padding-left: 15px;
  .source-part {
    width: 100%;
    height: 52px;
    background: #d3ebff;
    border-radius: 8px;
    margin-bottom: 7px;
  }
  .source-title {
    float: left;
    width: 58%;
    font-size: 13px;
    color: #4b5463;
    line-height: 20px;
    padding-top: 5px;
    padding-left: 15px;
  }
  .source-value {
    float: right;
    font-size: 18px;
    font-weight: 600;
    color: #00a3ff;
    line-height: 38px;
    padding-top: 7px;
    padding-right: 15px;
  }
}
.legend-body {
  position: absolute;
  bottom: 5px;
  right: 5px;
  width: 30%;
  height: 70px;
  .legend-content {
    width: 100%;
    height: 16px;
    margin-bottom: 5px;
    .legend-point {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      float: left;
      margin-right: 5px;
      margin-top: 4px;
    }
    .legend-title {
      font-size: 12px;
      color: #4b5463;
      float: left;
      line-height: 16px;
    }
    .legend-value {
      float: right;
      font-size: 14px;
      font-weight: 600;
    }
  }
}
.tabs {
  width: 100%;
  overflow: hidden;
  margin-bottom: 10px;
  > div {
    float: left;
    color: #7db2d0;
    padding: 0 7px;
    cursor: pointer;
  }
}
.selectActive {
  color: #00a3ff !important;
  font-weight: 600;
}
/deep/ .gutter {
  background-color: #cadfff;
}
/deep/ .el-table__body {
  width: 100% !important;
}
.el-table--striped .el-table__body tr.el-table__row--striped td {
  background: transparent;
}
.main ::-webkit-scrollbar {
  /*滚动条整体样式*/
  width: 10px; /*高宽分别对应横竖滚动条的尺寸*/
  height: 1px;
}
.main ::-webkit-scrollbar-thumb {
  /*滚动条里面小方块*/
  border-radius: 10px;
  background: rgba(0, 90, 255, 0.1);
}
.main ::-webkit-scrollbar-track {
  /*滚动条里面轨道*/
  -webkit-box-shadow: inset 0 0 5px rgba(0, 90, 255, 0.2);
  border-radius: 10px;
  background: #ededed;
}

.content-body /deep/ .el-table th {
  background-color: #cadfff !important;
  color: #4a6899;
  font-size: 12px;
  padding: 6px 0;
}
.content-body /deep/ .el-table,
.el-table__expanded-cell {
  background-color: transparent;
}

/deep/ .table-row1 {
  background-color: #082560 !important;
}
/deep/ .table-row2 {
  background-color: #051e79 !important;
}

.content-body /deep/ .el-table tr {
  th {
    border: none;
  }
  td {
    border: none;
  }
}
.content-body /deep/ .el-table tr {
  color: #bbdaff;
}
.content-body /deep/.has-gutter {
  background: #022b7e !important;
  tr {
    background: #022b7e !important;
    th {
      background: #022b7e !important;
      color: #00e4ff !important;
    }
  }
}
/deep/ .el-table,
.el-table__expanded-cell {
  background-color: transparent; //没有数据也变颜色
}
.content-body /deep/ .el-table--enable-row-transition .el-table__body td,
.el-table .cell {
  background-color: transparent;
}
/deep/.el-table__body-wrapper::-webkit-scrollbar {
  width: 0;
}
/deep/ .el-table tbody tr:hover > td {
  background-color: #5f83ff !important;
}

.legend {
  position: absolute;
  bottom: 10px;
  left: 5%;
  color: #a1e2ff;
  text-align: center;
  overflow: hidden;
  > div {
    float: left;
  }
}
.legendColor {
  width: 20px;
  height: 12px;
  line-height: 14px;
  border-radius: 3px;
  vertical-align: bottom;
}
.legend div:nth-child(2) {
  width: 170px;
  font-size: 12px;
  margin-left: 5px;
  text-align: left;
}
.aperture {
  position: absolute;
  top: 38%;
  left: 50%;
  margin-left: -33%;
  width: 66%;
  height: 82px;
  background-image: url('../../../../assets/img/industry/aperture.png');
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
.aperture1 {
  position: absolute;
  top: 36%;
  left: 50%;
  margin-left: -30%;
  width: 60%;
  height: 82px;
  background-image: url('../../../../assets/img/industry/aperture.png');
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.aperture2 {
  width: 70%;
  margin-left: -35%;
  height: 100px;
}
.enterprise-body {
  float: left;
  width: 60%;
  height: 200px;
  padding: 25px 5px;
  color: #ffffff;
}
.enterprise-content {
  width: 100%;
  height: 30px;
  padding: 0px 5px;
}
.enterprise-color {
  width: 10px;
  height: 10px;
  margin-top: 10px;
  float: left;
}
.enterprise-type {
  font-size: 13px;
  // color: #ffffff;
  line-height: 30px;
  float: left;
  margin-left: 12px;
}
.enterprise-count {
  font-size: 14px;
  line-height: 30px;
  float: right;

}
</style>
